   // 整体背景色
   $f-list-nav-sidebar-default-bg: rgba(#001c40, 0.10);
   // 构造三角的边线颜色
   $f-list-nav-sidebar-icon-border-color: #818FAB;
   // 构造三角的边线鼠标滑过颜色
   $f-list-nav-sidebar-hover-icon-border-color: #fff;
   // 整体宽
   $f-list-nav-sidebar-width: 0.375rem;
   // 整体高
   $f-list-nav-sidebar-height: 4.75rem;
   // 构造三角的边高
   $f-list-nav-sidebar-icon-border-height: 0.375rem;
   // 构造三角的边宽
   $f-list-nav-sidebar-icon-border-width: 0.25rem;
   // 圆角
   $f-list-nav-sidebar-border-radius: 4px;

   @mixin f-listNavSidebarIcon {

       .f-list-nav-toggle-sidebar {
           position: absolute;
           top: 50%;
           z-index: 99;
           margin-top: -0.5 * $f-list-nav-sidebar-height;
           width: $f-list-nav-sidebar-width;
           height: $f-list-nav-sidebar-height;
           line-height: $f-list-nav-sidebar-height;
           text-align: center;
           background: $f-list-nav-sidebar-default-bg;
           right: 0px;
           cursor: pointer;

           &:hover {
               background: $f-listnav-toggle-hover-bg;
               box-shadow: $f-listnav-toggle-hover-box-shadow;
           }

           &.active {
               background: $f-listnav-toggle-active-bg;
               box-shadow: $f-listnav-toggle-active-bg-box-shadow;
               transform: rotateY(180deg);
           }

           .triangle {
               display: inline-block;
               width: 0;
               height: 0;
           }

           &.f-list-nav-toggle-disabled {
               cursor: not-allowed;

               &:hover {
                   background: $f-list-nav-sidebar-default-bg;

                   .triangle {
                       border-right-color: $f-list-nav-sidebar-icon-border-color;
                   }
               }
           }
       }
   }

   // 在左侧
   @mixin f-listNavSidebarIcon-on-left {
       .f-list-nav-toggle-sidebar {
           left: 0;
           right: auto;
           border-radius: 0 $f-list-nav-sidebar-border-radius $f-list-nav-sidebar-border-radius 0;

           .triangle {
               border-top: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-bottom: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-left: $f-list-nav-sidebar-icon-border-width solid $f-list-nav-sidebar-icon-border-color;
           }

           &.active {
               left: -$f-list-nav-sidebar-width;

               .triangle {
                   border-left-color: $f-list-nav-sidebar-hover-icon-border-color;
               }
           }

           &:hover .triangle {
               border-left-color: $f-list-nav-sidebar-hover-icon-border-color;
           }
       }
   }

   // 在右侧
   @mixin f-listNavSidebarIcon-on-right {
       .f-list-nav-toggle-sidebar {
           right: 0px;
           border-radius: $f-list-nav-sidebar-border-radius 0 0 $f-list-nav-sidebar-border-radius;

           .triangle {
               border-top: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-bottom: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-right: $f-list-nav-sidebar-icon-border-height solid $f-list-nav-sidebar-icon-border-color;
           }

           &.active {
               right: -$f-list-nav-sidebar-width;

               .triangle {
                   border-right-color: $f-list-nav-sidebar-hover-icon-border-color;
               }
           }

           &:hover .triangle {
               border-right-color: $f-list-nav-sidebar-hover-icon-border-color;
           }
       }
   }

   // 在顶部
   @mixin f-listNavSidebarIcon-on-top {
       .f-list-nav-toggle-sidebar {
           margin-top: 0;
           height: $f-list-nav-sidebar-width;
           width: $f-list-nav-sidebar-height;
           line-height: 2px;
           border-radius: 0 0 $f-list-nav-sidebar-border-radius $f-list-nav-sidebar-border-radius;
           left: 50%;
           top: 0;
           bottom: auto;

           .triangle {
               border-top: $f-list-nav-sidebar-icon-border-width solid $f-list-nav-sidebar-icon-border-color;
               border-left: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-right: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-bottom: none;
               line-height: $f-list-nav-sidebar-icon-border-width;
           }

           &.active {
               right: auto;
               top: -$f-list-nav-sidebar-width;
               transform: rotateX(-180deg);

               .triangle {
                   border-top-color: $f-list-nav-sidebar-hover-icon-border-color;
               }
           }

           &:hover .triangle {
               border-top-color: $f-list-nav-sidebar-hover-icon-border-color;
           }
       }

   }

   // 在底部

   @mixin f-listNavSidebarIcon-on-bottom {

       .f-list-nav-toggle-sidebar {
           margin-top: 0;
           height: $f-list-nav-sidebar-width;
           width: $f-list-nav-sidebar-height;
           line-height: 2px;
           border-radius: $f-list-nav-sidebar-border-radius $f-list-nav-sidebar-border-radius 0 0;
           left: 50%;
           bottom: 0;
           top: auto;

           .triangle {
               border-bottom: $f-list-nav-sidebar-icon-border-width solid $f-list-nav-sidebar-icon-border-color;
               border-left: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-right: $f-list-nav-sidebar-icon-border-height solid transparent;
               border-top: none;
               line-height: $f-list-nav-sidebar-icon-border-width;
           }

           &.active {
               right: auto;
               bottom: -$f-list-nav-sidebar-width;
               transform: rotateX(-180deg);

               .triangle {
                   border-bottom-color: $f-list-nav-sidebar-hover-icon-border-color;
               }
           }

           &:hover .triangle {
               border-bottom-color: $f-list-nav-sidebar-hover-icon-border-color;
           }
       }
   }